<template>
  <div class="file-operation-page">
    <div class="ecahrts-xrq">
      <h1>echarts渲染区</h1>
      <EchartsPreview :width="'900px'" :height="'550px'" :option="option" @echartsCallback="echartsCallback" />
    </div>
    <div class="ecahrts-zsq">
      <h1>echarts展示区</h1>
      <img v-if="echartsUrl" :src="echartsUrl" alt="" />
    </div>
  </div>
</template>

<script setup>
import EchartsPreview from '@/components/echartsComponents/echartsPreview.vue'
import { ref, nextTick, onMounted } from 'vue'
const toFixedTWoFn = (num) => {
  return ((Math.round(num * 10000) / 10000) * 100).toFixed(2)
}

// 计算并设置直线位置
const dataArr = [
  { mediaLink: '视频', count: 300, },
  { mediaLink: '视频', count: 200, },
  { mediaLink: '视频', count: 150, },
  { mediaLink: '视频', count: 130, },
  { mediaLink: '视频', count: 100, },
  { mediaLink: '视频', count: 80, },
  { mediaLink: '视频', count: 60, },
  { mediaLink: '视频', count: 50, },
  { mediaLink: '视频', count: 38, },
  { mediaLink: '视频', count: 25, },
  { mediaLink: '视频', count: 10, },
  { mediaLink: '视频', count: 9, },
  { mediaLink: '视频', count: 6, },
  { mediaLink: '视频', count: 1, },
]

// 总数
const numAll = dataArr.reduce((pre, cur) => {
  return pre + cur.count
}, 0)


// 格式转化
dataArr.forEach((item, index) => {
  item.name =
    item.mediaLink + index + "\n" + item.count + "条," + toFixedTWoFn(item.count / numAll) + '%';
  item.value = item.count;
  item.proportion = toFixedTWoFn(item.count / numAll) + '%';
});

// 占比大于0.5的数组
let bigArr = dataArr.filter((item, index) => {
  return item.count / numAll >= 0.05
})
// 占比小于0.5的数组
let smallArr = dataArr.filter((item, index) => {
  return item.count / numAll < 0.05
})

// 计算小于5%的总数
let samallNum = smallArr.reduce((pre, cur) => {
  return pre + cur.count
}, 0)

// 计算小于5%的总占比 （用总占比100-每一项。保证最后总和为100%）
let smallNumZb = bigArr.reduce((pre, cur) => {
  return pre - toFixedTWoFn(cur.count / numAll)
}, 100)

// 低于百分之5的数据如果只有一项或者没有，则合并到大于百分之五的数据中
// 大于百分之5的数据为多项，则绘制第二张图
if (smallArr.length < 2) {
  bigArr.unshift(smallArr[0])
  smallArr = []
} else {
  // 给大于百分之五的数组添加其他项
  bigArr.unshift(
    {
      mediaLink: '其他',
      count: samallNum,
      value: samallNum,
      name: '其他,' + samallNum + "条," + smallNumZb.toFixed(2) + '%',
      proportion: smallNumZb.toFixed(2) + '%',
      labelLine: {
        lineStyle: {
          color: '#fff',
        },
      },
      emphasis: {
        scale: true,      // 是否开启高亮放大效果
        scaleSize: 205,    // 放大尺寸
        itemStyle: {
          borderWidth: 1,
          borderColor: 'grey',
          borderType: 'dashed',
        }
      },
    },
  )
}

const colors = ["#5793f3", "#FF6700", "#FED90F", "#00CED1", "#90ee90", "#87cefa", "#C8C8F6", "#32cd32", "#6495ed", "#ff69b4", "#DDA0DD", "#F08080", "#FFFF00", "#40e0d0", "#ee82ee", "#FFA07A", "#7b68ee", "#FFBC52", "#FFFF00", "#00bfff"]

const startAngle = 360 * smallNumZb / 100 / 2


let option = ref({
  colors: colors,
  backgroundColor: '#fff',
  series: [
    {
      type: 'pie',
      radius: [0, '60%'],
      center: ['35%', '50%'],
      selectedMode: 'single',
      startAngle: startAngle,
      selectedOffset: 0,  // 将选中偏移量设为0
      label: {
        lineHeight: 20,
        textStyle: {
          fontSize: 16,
          color: "#333",
          fontWeight: 'bold',
        },
        formatter: function (params) {
          if (params.data.mediaLink == '其他') {
            return ''
          }
        }
      },
      labelLine: {
        show: true, // 显示引导线
        lineStyle: {
          color: '#999',
        },
      },

      itemStyle: {
        // 设置扇形颜色为透明并绘制虚线轮廓
        color: function (params) {
          if (params.data.mediaLink == '其他') {
            return 'transparent'
          } else {
            return colors[params.dataIndex]
          }
        },
      },
      data: bigArr,
    },
    // 填充--其他--的数据
    {
      type: 'pie',
      selectedMode: 'single',
      radius: [0, '60%'],
      center: ['35%', '50%'],
      startAngle: startAngle,
      endAngle: 360 - startAngle,
      labelLine: {
        show: false, // 显示引导线
      },
      label: {
        show: false,
      },
      data: [{
        mediaLink: '其他',
        count: samallNum,
        value: samallNum,
        name: '其他,' + samallNum + "条," + smallNumZb.toFixed(2) + '%',
        proportion: smallNumZb.toFixed(2) + '%',
      }]
    },
    {
      type: 'pie',
      radius: ['110%', '135%'],
      center: ['35%', '50%'],
      startAngle: startAngle,
      endAngle: 360 - startAngle,
      data: smallArr,
      labelLine: {
        show: true, // 显示引导线
        lineStyle: {
          color: "#666", // 线条颜色
        },
      },
      itemStyle: {
        color: function (params) {
          if (params.data.mediaLink == '其他') {
            return 'transparent'
          } else {
            if (bigArr.length + smallArr.length > colors.length) {
              return colors[params.dataIndex]
            } else {
              return colors[bigArr.length + params.dataIndex]
            }
          }
        }
      },
      label: {
        color: "inherit",
        minMargin: 5,
        edgeDistance: 10,
        lineHeight: 20,
        textStyle: {
          fontSize: 16,
          color: "#333",
          fontWeight: 'bold',
        },
        formatter: function (params) {
          if (params.data.mediaLink == '其他') {
            return ''
          }
        }
      },
    }
  ],
})


// echarts回调事件
let echartsUrl = ref('')
const echartsCallback = (echarts) => {
  echarts.dispatchAction({
    type: 'highlight',
    seriesIndex: 0,
    dataIndex: 0
  });
  echarts.on('finished', () => {
    let picInfo = echarts.getDataURL({
      type: "png",
      pixelRatio: 3, //放大两倍下载，之后压缩到同等大小展示。解决生成图片在移动端模糊问题
      backgroundColor: "#fff",
    }); //获取到的是一串base64信息

    nextTick(() => {
      echartsUrl.value = picInfo
    })
  })
}


</script>

<style lang="scss" scoped>
.file-operation-page {
  padding: 10px 15px;
  width: 100%;
  height: 100%;
  display: flex;

  >div {
    h1 {
      margin-bottom: 20px;
    }
  }

  .ecahrts-xrq {
    width: 900px;
    margin-right: 20px;
  }

  .ecahrts-zsq {
    width: calc(100% - 920px);

    img {
      width: 450px;
      height: 270px;
    }
  }

  .file-operation {
    width: 100%;
    height: 100px;
  }

  .file-view {
    width: 100%;
    height: calc(100% - 100px);
  }
}
</style>
